<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-form :model="detailData" ref="detailData" size="mini" label-width="110px">
      <el-row :gutter="20" class="form-single-info">
        <el-col :span="14">
          <el-col :span="12">
            <el-form-item label="汇报类型：">{{detailData.reportTypeName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇报日期：">{{detailData.createTime}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇报人：">{{detailData.createUser}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇报对象：">{{detailData.receiveUserNames}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="本周完成工作：">{{detailData.workDone}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="下周工作计划：">{{detailData.workPlan}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="需协调工作：">{{detailData.workCoordination}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="clearfix" style="position: relative;">
              <el-form-item class="fl" label="汇报日志："></el-form-item>
              <div class="fl el-timeline-box">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index">
                    <el-card>
                      <h4>{{activity.createTime}}</h4>
                      <p>{{activity.userName}}：{{activity.comment}}</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <el-form-item style="padding: 20px 0;">
              <el-button @click="resetForm">返回</el-button>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { WorkItems } from '@/api/workItems.js';
export default {
  name: 'Weeklypaper',
  data () {
    return {
      loading: false,
      isShowloading: false,
      detailData: {},
      activities: []
    };
  },
  created () {
  },
  computed: {
  },
  mounted () {
    this.loadDetailWidgetData()
    this.loadLogWidgetData()
  },
  methods: {
    /**
     * 报告详情
     */
    loadDetailWidgetData () {
      let params = {
        id: this.$route.query.reportId
      };
      return new Promise((resolve, reject) => {
        WorkItems.detail(this, params).then(res => {
          this.detailData = res.data
          if (res.data.readFlag === 0) {
            this.loadReadWidgetData()
          }
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 报告已读
     */
    loadReadWidgetData () {
      let params = {
        id: this.detailData.id
      };
      return new Promise((resolve, reject) => {
        WorkItems.read(this, params).then(res => {
          this.$emit('getmessageRead')
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 报告日志详情
     */
    loadLogWidgetData () {
      let params = {
        id: this.$route.query.reportId
      };
      return new Promise((resolve, reject) => {
        WorkItems.log(this, params).then(res => {
          this.activities = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    resetForm () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.form-single-info{display: flex;justify-content: center;}
.el-timeline-box{
  margin-top: 10px;
  h4,p{margin: 0;}
  /deep/.el-card__body{background: #ECF5FF;}
}
.comment{border-top: 0;padding: 5px 0;}
</style>
